<template>
  <div id="excellentSiteChart"></div>
</template>

<script>
import { defineComponent, ref, onMounted, nextTick, computed } from 'vue';
export default defineComponent({
  name: 'ExcellentSiteChart',
});
</script>
<script setup>
import * as echarts from 'echarts';
import 'echarts-gl';
import { useLargeDataScreenStore } from '@/store';
import myUtils from '@/utils/myUtils';

const largeDataScreenStore = useLargeDataScreenStore();

const valueComp = computed(() => {
  let arr = [];

  myUtils.arrSortS(largeDataScreenStore.excellentSite).forEach((item) => {
    arr.push(item.value);
  });
  return arr;
});

const labelComp = computed(() => {
  let arr = [];
  myUtils.arrSortS(largeDataScreenStore.excellentSite).forEach((item) => {
    arr.push(item.label);
  });
  return arr;
});

nextTick(() => {
  let dom = document.getElementById('excellentSiteChart');
  console.log(dom);
  let myChart = echarts.init(dom, null, {
    renderer: 'svg', // 设置渲染方式为 SVG
  });

  let option = {
    aria: {
      decal: {
        enabled: true,
        decal: {
          show: true,
        },
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },

    grid: {
      left: '3%',
      right: '4%',
      top: '10%',
      bottom: '3%',
      containLabel: true,
    },
    backgroundColor: 'transparent',
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLabel: {
        color: '#fff',
        fontSize: 14,
        fontFamily: 'fontShuHeiTi',
      },
      splitLine: {
        lineStyle: {
          type: 'solid',
          color: 'rgba(10, 130, 245,1)', //坐标轴线颜色
          width: '2',
        },
      },
      axisLine: {
        // 修改x轴线条样式
        lineStyle: {
          color: 'red', // 将x轴线条颜色设为红色
        },
      },
    },
    yAxis: {
      type: 'category',
      data: labelComp.value,
      axisLabel: {
        color: '#fff',
        fontSize: 14,
        fontFamily: 'fontShuHeiTi',
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(10, 130, 245,1)', //X轴线条颜色
        },
      },
    },
    series: [
      {
        name: '主系列',
        type: 'bar',
        data: valueComp.value,
        z: 1,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#01F9FF', // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#3EA0EF', // 100% 处的颜色
            },
          ],
        },
        // 无障碍花纹实现斜纹
        itemStyle: {
          borderRadius: 30,
          borderWidth: 0,
          decal: {
            color: '#0E89EB',
            symbol: 'rect',
            symbolSize: 1,
            dashArrayY: [1, 0],
            dashArrayX: 30,
            rotation: 60,
          },
        },
        barWidth: 16,
      },
      //  再覆盖一层颜色
      {
        name: '主系列',
        type: 'bar',
        data: valueComp.value,
        barGap: '-100%',
        z: 2,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(1,249,266,1)', // 0% 处的颜色
            },
            {
              offset: 0.2,
              color: 'rgba(1,249,266,1)', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(62,160,239,0)', // 100% 处的颜色
            },
          ],
        },
        itemStyle: {
          borderRadius: 30,
          borderWidth: 0,
        },
        barWidth: 16,
      },
    ],
  };

  myChart.setOption(option);
});
</script>

<style lang="scss" scoped>
#excellentSiteChart {
  // border: 1px solid red;
  width: 480px;
  height: 260px;
}
</style>
